
<script>
	var type 	= localStorage.getItem("estudia_type");
	var course	= localStorage.getItem("estudia_course");
	
	var param 		= localStorage.getItem("estudia_currentpage");
	
	$('#title').append("<h1>" + (localStorage.getItem("estudia_chapter")).slice(2) + "</h1>");
	
	$('#resultset').hide();
	
	var file 	= "../assets/bank/" + type + "/" + course + "/bab " + localStorage.getItem("estudia_chapter").charAt(0) + "/" + param + ".txt";
	var submit 	= document.getElementsByName('submit')[0];
	
	var jawaban;
	
	$('#rad_a').focus();
	
	var xhr = new XMLHttpRequest();
	xhr.open("GET", file, true);
	xhr.onreadystatechange = function ()
	{
		if(xhr.readyState === 4)
		{
			if(xhr.status === 200 || xhr.status == 0)
			{
				var response = JSON.parse(xhr.responseText);
				
				$('#question').append(param + ". " + response["soal"]);
				
				$('#pil_a').append(response["pil_a"]);
				$('#pil_b').append(response["pil_b"]);
				$('#pil_c').append(response["pil_c"]);
				$('#pil_d').append(response["pil_d"]);
				
				jawaban = response["jawaban"];
			}
		}
	}
	xhr.send(null);
	
	document.getElementById('answer').onsubmit = function() {
		var selected = $("input[type='radio'][name='answers']:checked");
		
		var jawaban_benar = "<h3>Jawaban kamu benar (point +20)</h3>";
		var jawaban_salah = "<h3>Jawaban kamu salah<br />Jawaban benar = " + jawaban + "</h3>";
		
		if (param == 5) {
			$('#next_button').append("Quiz Summary");
		} else {
			$('#next_button').append("Pertanyaan Selanjutnya");
		}
		
		$('.answers').attr("disabled", true);
		//$('#answer_submit').attr("disabled", true);
		$('#resultset').show();
		
		//alert(selected.val() + " = " + jawaban);
		if (selected.val() == jawaban) {
			$('#answer_result').append(jawaban_benar);
			var right = parseInt(localStorage.getItem("estudia_ans_right")) + 1;
			localStorage.setItem("estudia_ans_right", right);
		} else {
			$('#answer_result').append(jawaban_salah);
			var wrong = parseInt(localStorage.getItem("estudia_ans_false")) + 1;
			localStorage.setItem("estudia_ans_false", wrong);
		}
		
		return false;
	};	
	
	$('#next_button').click(function() {
		if ((param != 5)) {
			localStorage.setItem("estudia_currentpage", (parseInt(param) + 1));
			$(".middle_side").load("tampilansoal.html", function(data) {

			});
		} else {
			//alert(localStorage.getItem("estudia_ans_right"));
			//alert(localStorage.getItem("estudia_ans_false"));
			
			$(".middle_side").load("quizsummary.html", function(data) {

			});				
		}
	});
	
</script>

<div id="title"></div>
<div class="questionset" id="questionset">
	<div id="question"></div>
		
	<form class="answer" id="answer">
		<input type="radio" class="answers" name="answers" id="rad_a" value="A" checked><div class="answerset" id="pil_a">A. </div><br />
		<input type="radio" class="answers" name="answers" id="rad_b" value="B"><div class="answerset" id="pil_b">B. </div><br />
		<input type="radio" class="answers" name="answers" id="rad_c" value="C"><div class="answerset" id="pil_c">C. </div><br />
		<input type="radio" class="answers" name="answers" id="rad_d" value="D"><div class="answerset" id="pil_d">D. </div><br />
		
		<input type='submit' class="answers" name='submit' id="answer_submit" value='Yakin'>
	</form>
</div>
<div class="resultset" id="resultset">
	<span id="answer_result"></span>
	<div id="result_button">
		<button type="button" id="next_button"></button>
	</div>
</div>
